<template>
  <split-container type="right" class="h-full">
    <x-card hide-search class="!border-r-0">
      <template #title>
        <el-space>
          <x-button bus-type="insert" @click="methods.add"></x-button>
          <x-button bus-type="update" @click="methods.edit"></x-button>
          <x-button bus-type="view" @click="methods.view"></x-button>
          <x-button bus-type="del" @click="methods.del"></x-button>
        </el-space>
        <el-space>
          <el-input v-model="condition.name" placeholder="名称"></el-input>
          <x-button bus-type="query" @click="methods.query"></x-button>
        </el-space>
      </template>
      <template #main>
        <x-table v-model:selection="table.selection" v-bind="table" @page-change="methods.tablePageChange"
          @row-click="methods.tableRowClick">
        </x-table>
      </template>
    </x-card>
    <x-card hide-search class="w-250px">
      <template #title>
        <el-space>
          <x-button :icon="ButtonIcons.finish" type="primary" @click="methods.savePermission">保存授权</x-button>
        </el-space>
      </template>
      <template #main>
        <resource-tree :show-checkbox="true" ref="resourceTreeRef"></resource-tree>
      </template>
    </x-card>
    <editor v-model:visable="editor.visable" v-bind="editor" @saved="methods.query"></editor>
  </split-container>
</template>
<script lang="ts" setup>
import { ButtonIcons } from '~/components/xview/button/ButtonIcons'
import ResourceTree from '../resource/ResourceTree.vue'
import { RoleService } from '~/service/sys'
import { ITableColumn } from '~/components/xview/table/ITableColumn'
import { reactive, ref } from 'vue'
import { ResourceQueryCondition } from '~/types/sys/ResourceQueryCondition'
import elpUtil from '~/utils/elp'
import { SysRole } from '~/types/sys/SysRole'
import { initTable } from '~/hooks/TableHooks'
import { ITreeNode } from '~/types/ui/tree/ITreeNode'
import { EditorHooks } from '~/hooks'
import Editor from './editor.vue'

const editor = EditorHooks.init<SysRole>()
const resourceTreeRef = ref<InstanceType<typeof ResourceTree>>(null)
let currentRole: SysRole = null

const condition = reactive<ResourceQueryCondition>(new ResourceQueryCondition())

const methods = {
  add() {
    const model = {} as SysRole
    editor.insert(model);
  },
  edit() {
    if (table.selection.length == 0) {
      elpUtil.msg.warning('请先选择需要编辑的数据行')
      return
    }
    editor.update(table.selection[0])
  },
  view() {
    if (table.selection.length == 0) {
      elpUtil.msg.warning('请先选择需要查看的数据行')
      return
    }
    editor.view(table.selection[0])
  },
  async del() {
    if (table.selection.length == 0) return
    const ids = table.selection.map((t) => t.id)
    await RoleService.del(ids)
    elpUtil.msg.success('角色删除成功')
    methods.query()
  },
  async query() {
    const data = await RoleService.query(condition)
    table.pageCurrent = data.currentPage
    table.recordsTotal = data.recordsTotal
    table.tableData = data.data
  },
  async tableRowClick(row: SysRole) {
    currentRole = row
    let permissions = await RoleService.rolePermissions(row.id);
    if (!permissions) permissions = []
    resourceTreeRef.value!.setCheckedKeys(permissions)
  },
  tablePageChange(page: number) {
    condition.paging.current = page
    methods.query()
  },
  treeNodeChange(node: ITreeNode) {
    condition.parentResourceId = node.id
    methods.query()
  },
  dialogVisable(val: boolean) {
    editor.visable = val
  },
  async savePermission() {
    if (currentRole === null) return;
    const checkedKeys = resourceTreeRef.value!.getCheckedKeys()
    await RoleService.savePermissions(currentRole.id, checkedKeys as string[]);
    elpUtil.msg.success('授权信息已成功保存')
  }
}

const table = initTable<SysRole>([
  {
    label: '角色Key',
    prop: 'roleKey',
    width: 150
  },
  {
    label: '名称',
    prop: 'roleName',
    width: 200
  },
  {
    label: '备注',
    prop: 'remark',
  },
  {
    label: '排序',
    prop: 'sort',
    width: 100
  }
] as ITableColumn[])

methods.query()
</script>
